<template>
  <div class="usafe-containner">
    <el-dialog title="查看联动" :visible.sync="dialogSafeLook">
      <el-form class="safelook" label-width="101px">
        <el-form-item label="策略名称:">
          <el-input class="lookInput" v-model="linkageLookData.name" readonly></el-input>
        </el-form-item>
        <el-form-item label="测点:">
          <el-input class="lookInput" v-model="linkageLookData.point" readonly></el-input>
        </el-form-item>
        <el-form-item label="触发条件:">
          <el-input class="lookInput" v-model="linkageLookData.terms" readonly></el-input>
        </el-form-item>
        <div class="formBackground">
          <el-form-item label="触发动作:">
            <el-input class="lookInput inputBackground" v-model="linkageLookData.type" readonly></el-input>
          </el-form-item>
          <div>
            <el-table class="linkagesTable" :data="LookSafeTime">
              <el-table-column class="tablePadding" width="700px" prop="name">
                <template slot-scope="scope">
                  <div class="addrWidth">
                    <span class="addrsWeight">视频参数{{scope.$index + 1}}:</span>
                    <!--<div class="lookAnatherInput" style="float: right">{{LookSafeTime[scope.$index].value}}</div>-->
                    <el-input class="lookAnatherInput inputBackground" v-model="LookSafeTime[scope.$index].value"></el-input>
                  </div>
                  <!--<el-input v-model="addSafeTime[scope.$index].name"></el-input>-->
                </template>
              </el-table-column>
            </el-table>
          </div>
          <el-form-item label="拍照张数:">
            <el-input class="lookInput inputBackground" v-model="linkageLookData.photoNum" readonly></el-input>
          </el-form-item>
          <el-form-item label="时间间隔:">
            <el-input class="lookInput inputBackground" v-model="linkageLookData.interval" readonly></el-input>
          </el-form-item>
        </div>
        <el-form-item label="生效时段:">
          <el-input class="lookInput" v-model="linkageLookData.validTime" readonly></el-input>
        </el-form-item>
        <el-form-item label="状态:" v-if="linkageLookData.status === '启用'">
          <el-input class="lookInput enableColor" v-model="linkageLookData.status" readonly></el-input>
        </el-form-item>
        <el-form-item label="状态:" v-if="linkageLookData.status === '禁用'">
          <el-input class="lookInput disabledColor" v-model="linkageLookData.status" readonly></el-input>
        </el-form-item>
      </el-form>
    </el-dialog>
    <el-dialog class="dialogSafeEdit" title="编辑联动" :visible.sync="dialogSafeEdit">
      <el-form ref="form" :model="editLinkage" label-width="80px">
        <span id="addNameSpan">*</span>
        <el-form-item class="editForm" prop="Name" label="策略名称:">
          <el-input class="editInput" v-model="editLinkage.Name"></el-input>
        </el-form-item>
        <el-row class="editRow">
          <el-col class="editRowLeft" :span="8">
            <el-input class="leftInput" v-model="editLinkageId" placeholder="输入关键字进行过滤"></el-input>
            <div class="grid-content bg-purple theLinkageTree">
              <el-tree
                :data="linkageTreeData"
                :props="linkageTreeprops"
                node-key="resource_id"
                ref="vuetree"
                :highlight-current="true"
                :default-expand-all="true"
                :filter-node-method="editFilterNode"
                @node-click="editLinkageNodeClick">
              </el-tree>
            </div>
          </el-col>
          <el-col class="linkageRowRight" :span="16">
            <div>
              <el-form class="linkageForm" :rules="rules" ref="form" :model="editLinkage" label-width="82px">
                <el-form-item class="linkageLabel" prop="Terms" label="触发条件:">
                  <el-select class="linkageSelect" v-model="editLinkage.Terms" size="small" multiple placeholder="请选择">
                    <el-option
                      v-for="item in linkageTermsData"
                      :key="item.value"
                      :label="item.label"
                      :value="item.value">
                    </el-option>
                  </el-select>
                </el-form-item>
                <div class="formsBackground">
                  <el-form-item class="linkageLabel" prop="Type" label="触发动作:">
                    <el-select class="linkageSelect" v-model="editLinkage.Type" placeholder="请选择">
                      <el-option
                        v-for="item in linkageTypeData"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value">
                      </el-option>
                    </el-select>
                  </el-form-item>
                  <div>
                    <el-table class="linkagesTable" :data="editSafeTime">
                      <el-table-column class="tablePadding" width="395px" prop="name">
                        <template slot-scope="scope">
                          <div class="videoBlock">
                            <span class="videoSpan">*</span>
                            <span>视频参数{{scope.$index + 1}}:</span>
                            <el-input class="videoInput" v-model="editSafeTime[scope.$index]" placeholder="格式: ip地址#端口#用户名#密码#通道号"></el-input>
                          </div>
                        </template>
                      </el-table-column>
                      <el-table-column class="tablePadding">
                        <template  slot-scope="scope">
                          <el-button v-if="scope.$index < 8" class="tableIcon" title="添加" type="text" size="small" @click="editAddTime(scope.$index)"><i class="el-icon-plus"></i></el-button>
                          <el-button v-if="scope.$index > 0" class="tableIcon" title="删除" type="text" size="small" @click="editDeleteRow(scope.$index)"><i class="el-icon-minus"></i></el-button>
                        </template>
                      </el-table-column>
                    </el-table>
                  </div>
                  <el-form-item class="linkageLabel" prop="PhotoNum" label="拍照张数:">
                    <el-input v-model="editLinkage.PhotoNum"></el-input>
                  </el-form-item>
                  <el-form-item class="linkageLabel" prop="Interval" label="时间间隔:">
                    <el-input class="interval" v-model="editLinkage.Interval"></el-input><span class="numberOfSeconds">s</span>
                  </el-form-item>
                </div>
                <el-form-item class="linkageLabel" prop="ValidTime" label="生效时间:">
                  <el-time-picker
                    class="forceTime"
                    is-range
                    v-model="editLinkage.ValidTime"
                    size="small"
                    range-separator="至"
                    format="HH:mm:ss"
                    value-format="HH:mm:ss"
                    start-placeholder="开始日期"
                    end-placeholder="结束日期"
                    placeholder="选择时间范围">
                  </el-time-picker>
                </el-form-item>
              </el-form>
            </div>
          </el-col>
        </el-row>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <div class="notes">注: <span id="editAsterisk">*</span> 为必填项</div>
        <el-button class="clears" @click="dialogSafeEdit = false">取 消</el-button>
        <el-button class="bottonConfirm" type="primary" @click="editLinkageEnd">确 定</el-button>
      </div>
    </el-dialog>
    <div class="safeSearch">
      <header-linkage v-bind:deleteids="deleteid" v-on:findLinkageId="findLinkageId"></header-linkage>
    </div>
    <div class="safeTableList">
      <div class="pagination-container footerPage">
        <el-pagination
          :current-page="ListQuery.page"
          :page-sizes="[5, 10, 20, 50]"
          :page-size="ListQuery.limit"
          background
          layout="total, sizes, prev, pager, next"
          :total="linkageTotal"
          @size-change="linkageSizeChange"
          @current-change="linkageCurrentChange">
        </el-pagination>
      </div>
      <el-dialog
        title="提示"
        :visible.sync="dialogDisable"
        width="540px"
        class="safeDisableDialog"
        style="margin-top: 20vh;">
        <div style="width: 100%; text-align: center; height: 100px; padding-top: 35px;">
          <img :src="disableIcon"/>
        </div>
        <span>确认禁用此联动</span>
        <span slot="footer" class="dialog-footer">
          <el-button class="clears" @click="dialogDisable = false">取 消</el-button>
          <el-button type="primary" style="float: right" @click="disableWork()">确 定</el-button>
        </span>
      </el-dialog>
      <el-dialog
        title="提示"
        :visible.sync="dialogEnable"
        width="540px"
        class="safeDisableDialog"
        style="margin-top: 20vh;">
        <div style="width: 100%; text-align: center; height: 100px; padding-top: 35px;">
          <img :src="enableIcon"/>
        </div>
        <span>确认启用此联动</span>
        <span slot="footer" class="dialog-footer">
          <el-button class="clears" @click="dialogEnable = false">取 消</el-button>
          <el-button type="primary" style="float: right" @click="enableWork()">确 定</el-button>
        </span>
      </el-dialog>
      <el-table
        :data="linkageAllData"
        stripe fit highlight-current-row
        style="width: 100%;overflow-y: auto; "
        height="560px"
        :header-cell-style="{background:'#F7F8F9',height: '20px',padding:'3px 0px 2px 0px'}"
        @selection-change="linkageChangeFun">
        <el-table-column type="selection" align="center" width="40" @selection-change="linkageChangeFun"></el-table-column>
        <el-table-column
          prop="index"
          align="center"
          label="序号"
          width="60px"
        >
        </el-table-column>
        <el-table-column
          v-for="(column, index) in colss"
          :prop="column.prop"
          :label="column.label"
          :key="index"
          :width="column.width"
          :sortable="column.sortable"
        >
        </el-table-column>
        <el-table-column
          prop="status"
          label="状态"
          width="75px"
          sortable="true"
        >
          <template slot-scope="scope">
            <el-tag
              :type="scope.row.status[0] === '启用' ? 'primary' : 'success'"
              disable-transitions>{{scope.row.status[0]}}</el-tag>
          </template>
        </el-table-column>
        <el-table-column
          type="index"
          label="操作"
          width="160px"
        >
          <template slot-scope="scope">
            <el-button class="tableIcon" title="查看" @click="linkageLookDialog(scope.$index, scope.row)" type="text" size="small">
              <img :src="viewIcon"/>
            </el-button>
            <el-button class="tableIcon" title="编辑" @click="linkageEditDialog(scope.$index, scope.row)" type="text" size="small">
              <img :src="update"/>
            </el-button>
            <el-button class="tableIcon" title="删除" @click="linkageDeleteDialog(scope.$index, scope.row)" type="text" size="small">
              <img :src="deletes"/>
            </el-button>
            <delete-dialog></delete-dialog>
            <span class="segmentingLine">|</span>
            <el-button v-if="scope.row.status[1] === '0'" @click="linkageEnable(scope.$index,scope.row)" v-show="true" class="tableIcon" title="启用" type="text" size="small">
              <img :src="enable"/>
            </el-button>
            <el-button v-if="scope.row.status[1] === '1'" @click="linkageDisable(scope.$index,scope.row)" v-show="true" class="tableIcon" title="禁用" type="text" size="small">
              <img :src="disable"/>
            </el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
  </div>
</template>
<script>
  import headerLinkage from './components/headerLinkage'
  import deleteDialog from './components/delete'

  import enable from '@/assets/reports/enable_normal.png'
  import disable from '@/assets/reports/disabled_normal.png'
  import deletes from '@/assets/reports/delete_normal.png'
  import remove from '@/assets/mSiteAdmin/remove.png'
  import update from '@/assets/reports/redact_normal.png'
  import viewIcon from '@/assets/reports/detail_normal.png'
  import disableIcon from '@/assets/mSiteAdmin/disable-icon.png'
  import enableIcon from '@/assets/mSiteAdmin/enable-icon.png'
  import axios from 'axios'
  export default {
    name: 'safeTime',
    components: { headerLinkage, deleteDialog },
    data() {
      return {
        dialogDisable: false,
        dialogEnable: false,
        form: {
          name: ''
        },
        rules: {
          Name: [
            { required: true, message: ' ', trigger: 'blur' }
          ],
          Terms: [
            { type: 'array', required: true, message: ' ', trigger: 'change' }
          ],
          Type: [
            { required: true, message: ' ', trigger: 'change' }
          ],
          PhotoNum: [
            { required: true, message: ' ', trigger: 'blur' }
          ],
          Interval: [
            { required: true, message: ' ', trigger: 'blur' }
          ],
          ValidTime: [
            { required: true, message: ' ', trigger: 'change' }
          ]
        },
        editLinkage: {
          Name: '',
          Terms: '',
          Type: '',
          PhotoNum: '',
          Interval: '',
          ValidTime: ''
        },
        value6: [],
        value5: [],
        deleteid: [],
        LookSafeTime: [{ value: '' }],
        editSafeTime: [],
        value4: '',
        linkageTreeprops: {
          label: 'name'
        },
        count: '1',
        colss: [
          { prop: 'cid', label: '策略编号', width: '150px' },
          { prop: 'name', label: '联动策略名称', width: '150px' },
          { prop: 'terms_label', label: '触发条件', sortable: true },
          { prop: 'linkage_type_label', label: '触发动作', width: '120px', sortable: true },
          { prop: 'begin_time', label: '生效时段', width: '150px' }
        ],
        tableData: [],
        editLinkageId: '',
        editLinkageRid: '',
        editLinkageAddrs: '',
        linkageTreeData: [],
        linkageTypeData: [],
        linkageTermsData: [],
        currentPage4: {
          page: 1
        },
        linkageTotal: 0,
        ListQuery: {
          page: 1,
          limit: 10
        },
        enable,
        disable,
        deletes,
        remove,
        update,
        viewIcon,
        enableIcon,
        disableIcon,
        linkageAllData: [],
        linkageDeleteNeedId: [],
        findInput: '',
        dialogSafeLook: false,
        dialogSafeEdit: false,
        formLabelWidth: '101px',
        formLabelWidth2: '50px',
        // 查看框数据
        linkageLookData: {
          name: '',
          point: '',
          terms: '',
          type: '',
          photoNum: '',
          interval: '',
          validTime: '',
          addrs: '',
          status: ''
        },
        // 总览请求体
        linkageAll: {
          access_token: localStorage.getItem('access_token'),
          type: 'strategy_get_condition',
          pid: localStorage.getItem('num'),
          data: {
            condition: {
              cid: '',
              name: '',
              search: '',
              type: ''
            },
            page: {
              page_size: '10',
              page_number: '1'
            }
          }
        },
        // 获取组织树
        linkageTree: {
          access_token: localStorage.getItem('access_token'),
          type: 'resource_getall',
          pid: localStorage.getItem('num'),
          ids: ['']
        },
        // 删除请求体
        linkageDelete: {
          access_token: localStorage.getItem('access_token'),
          type: 'strategy_del',
          pid: localStorage.getItem('num'),
          ids: []
        },
        // 编辑请求体
        linkageEdit: {
          access_token: localStorage.getItem('access_token'),
          type: 'strategy_mod',
          pid: localStorage.getItem('num'),
          data: {
            cid: '',
            name: '',
            rid: '',
            terms: [],
            linkage_val: '',
            linkage_type: '',
            photo_num: '',
            interval: '',
            valid_begin_time: '',
            valid_end_time: '',
            status: 0,
            addrs: ['']
          }
        },
        // 获取请求体
        linkageGet: {
          access_token: localStorage.getItem('access_token'),
          type: 'strategy_get_byid',
          pid: localStorage.getItem('num'),
          id: ''
        },
        // 启用联动策略
        linkageEnableBody: {
          access_token: localStorage.getItem('access_token'),
          type: 'strategy_enable',
          pid: localStorage.getItem('num'),
          ids: []
        },
        // 禁用联动策略
        linkageDisableBody: {
          access_token: localStorage.getItem('access_token'),
          type: 'strategy_disable',
          pid: localStorage.getItem('num'),
          ids: []
        },
        // 获取触发条件
        linkageTermsGet: {
          access_token: localStorage.getItem('access_token'),
          type: 'strategy_get_terms',
          pid: localStorage.getItem('num'),
          id: '',
          ids: []
        },
        // 获取触发动作
        linkageTypeGet: {
          access_token: localStorage.getItem('access_token'),
          type: 'strategy_get_type',
          pid: localStorage.getItem('num')
        }
      }
    },
    mounted() {
      this.getLinkageList()
    },
    watch: {
      editLinkageId(val) {
        this.$refs.vuetree.filter(val)
      }
    },
    methods: {
      toJSON() {
      },
      editFilterNode(value, data) {
        if (!value) return true
        return data.name.indexOf(value) !== -1
      },
      // 联动总览
      getLinkageList() {
        axios.post('/linkagemanage', this.linkageAll, {
          headers: {
            'Content-Type': 'application/x-www-form-urlencoded'
          }
        }).then((res) => {
          this.linkageAllData = []
          this.linkageAllData = res.data.data.items
          for (let a = 0; a < res.data.data.items.length; a++) {
            this.linkageAllData[a].index = (a + 1) + (res.data.data.page.page_number - 1) * res.data.data.page.page_size
          }
          this.linkageTotal = (Number(res.data.data.page.total))
          for (let i = 0; i < this.linkageAllData.length; i++) {
            this.linkageAllData[i].begin_time = this.linkageAllData[i].valid_begin_time + ' - ' + this.linkageAllData[i].valid_end_time
            if (this.linkageAllData[i].status === 0) {
              this.linkageAllData[i].status = []
              this.linkageAllData[i].status.push('禁用')
              this.linkageAllData[i].status.push('0')
            } else {
              this.linkageAllData[i].status = []
              this.linkageAllData[i].status.push('启用')
              this.linkageAllData[i].status.push('1')
            }
          }
        })
          .catch(function(error) {
            console.log(error)
          })
      },
      // 删除联动
      deleteLinkage() {
        axios.post('/linkagemanage', this.linkageDelete, {
          headers: {
            'Content-Type': 'application/x-www-form-urlencoded'
          }
        }).then((res) => {
          this.$message({
            type: 'success',
            message: '删除成功'
          })
          this.linkageDelete.ids = []
          this.getLinkageList()
        })
          .catch(function(error) {
            console.log(error)
          })
      },
      // 查看窗口
      linkageLookDialog(index, row) {
        this.linkageGet.id = row.cid
        axios.post('/linkagemanage', this.linkageGet, {
          headers: {
            'Content-Type': 'application/x-www-form-urlencoded'
          }
        }).then((res) => {
          this.linkageLookData.name = res.data.data.name
          this.linkageLookData.point = res.data.data.rid_name
          this.linkageLookData.terms = res.data.data.terms_label
          this.linkageLookData.type = res.data.data.linkage_type_label
          this.linkageLookData.photoNum = res.data.data.photo_num
          this.linkageLookData.interval = res.data.data.interval
          this.linkageLookData.validTime = res.data.data.valid_begin_time + ' - ' + res.data.data.valid_end_time
          if (res.data.data.status === 0) {
            this.linkageLookData.status = '禁用'
          } else {
            this.linkageLookData.status = '启用'
          }
          this.LookSafeTime = []
          for (let i = 0; i < res.data.data.addrs.length; i++) {
            this.LookSafeTime.push({ value: '' })
            this.LookSafeTime[i].value = res.data.data.addrs[i]
          }
          // 联动策略中查看时，只需要显示测点名称，而非测点编号
          let cedianID = new Array();
          cedianID = res.data.data.rid_name.split(">");
          for (let index = 0; index < cedianID.length; index++) {
            let cdID = cedianID[cedianID.length-1];
            this.linkageLookData.point = cdID;
          }

        })
          .catch(function(error) {
            console.log(error)
          })
        this.dialogSafeLook = true
        
      },
      // 编辑窗口
      linkageEditDialog(index, row) {
        this.linkageGet.id = row.cid
        this.editLinkageId = ''
        axios.post('/linkagemanage', this.linkageTypeGet, {
          headers: {
            'Content-Type': 'application/x-www-form-urlencoded'
          }
        }).then((res) => {
          this.linkageTypeData = []
          this.linkageTypeData = res.data.datas
          this.getlinkageTree()
        })
          .catch(function(error) {
            console.log(error)
          })
      },
      getlinkageTree() {
        axios.post('/project', this.linkageTree, {
          headers: {
            'Content-Type': 'application/x-www-form-urlencoded'
          }
        }).then((res) => {
          this.linkageTreeData = []
          this.linkageTreeData.push(res.data.datas)
          this.getlinkagelists()
        })
          .catch(function(error) {
            console.log(error)
          })
      },
      getlinkagelists() {
        axios.post('/linkagemanage', this.linkageGet, {
          headers: {
            'Content-Type': 'application/x-www-form-urlencoded'
          }
        }).then((res) => {
          this.linkageEdit.data.cid = res.data.data.cid
          this.linkageEdit.data.status = res.data.data.status
          this.editLinkage.Name = res.data.data.name
          this.editLinkage.Terms = res.data.data.terms
          this.editLinkage.Type = res.data.data.linkage_type
          this.editLinkage.PhotoNum = res.data.data.photo_num
          this.editLinkage.Interval = res.data.data.interval
          this.editLinkage.ValidTime = [res.data.data.valid_begin_time, res.data.data.valid_end_time]
          this.editLinkageRid = res.data.data.rid
          this.editSafeTime = []
          for (let a = 0; a < res.data.data.addrs.length; a++) {
            this.editSafeTime.push('')
            this.editSafeTime[a] = res.data.data.addrs[a]
          }
          this.setCurrent()
        })
          .catch(function(error) {
            console.log(error)
          })
      },
      setCurrent() {
        // $nextTick获取更新后的DOM才能对树操作
        this.$nextTick(function() {
          this.$refs.vuetree.setCurrentKey(this.editLinkageRid)
        })
        this.linkageTermsGet.id = this.editLinkageRid
        axios.post('/linkagemanage', this.linkageTermsGet, {
          headers: {
            'Content-Type': 'application/x-www-form-urlencoded'
          }
        }).then((res) => {
          this.linkageTermsData = []
          this.linkageTermsData = res.data.datas
        })
          .catch(function(error) {
            console.log(error)
          })
        this.dialogSafeEdit = true
      },
      // 编辑确认
      editLinkageEnd() {
        if (!this.editLinkage.Name) {
          this.$message.error('请输入策略名称')
        } else {
          if (!this.$refs.vuetree.getCurrentKey()) {
            this.$message.error('请勾选测点树')
          } else {
            if (this.editLinkage.Terms.length === 0) {
              this.$message.error('请选择触发条件')
            } else {
              if (!this.editLinkage.Type) {
                this.$message.error('请选择触发动作')
              } else {
                if (!this.editLinkage.PhotoNum) {
                  this.$message.error('请输入拍照张数')
                } else {
                  if (!this.editLinkage.Interval) {
                    this.$message.error('请输入时间间隔')
                  } else {
                    if (this.editLinkage.ValidTime.length === 0) {
                      this.$message.error('请选择生效时间')
                    }
                  }
                }
              }
            }
          }
        }
        this.linkageEdit.data.name = this.editLinkage.Name
        this.linkageEdit.data.rid = this.$refs.vuetree.getCurrentKey()
        this.linkageEdit.data.terms = this.editLinkage.Terms
        this.linkageEdit.data.linkage_val = this.editLinkage.Type
        this.linkageEdit.data.linkage_type = this.editLinkage.Type
        this.linkageEdit.data.photo_num = this.editLinkage.PhotoNum
        this.linkageEdit.data.interval = this.editLinkage.Interval
        this.linkageEdit.data.valid_begin_time = this.editLinkage.ValidTime[0]
        this.linkageEdit.data.valid_end_time = this.editLinkage.ValidTime[1]
        this.linkageEdit.data.addrs = this.editSafeTime
        axios.post('/linkagemanage', this.linkageEdit, {
          headers: {
            'Content-Type': 'application/x-www-form-urlencoded'
          }
        }).then((res) => {
          this.linkageEdit.data.name = ''
          this.linkageEdit.data.rid = ''
          this.linkageEdit.data.terms = []
          this.linkageEdit.data.linkage_val = ''
          this.linkageEdit.data.linkage_type = ''
          this.linkageEdit.data.photo_num = ''
          this.linkageEdit.data.interval = ''
          this.linkageEdit.data.valid_begin_time = ''
          this.linkageEdit.data.valid_end_time = ''
          this.linkageEdit.data.addrs = []
          this.dialogSafeEdit = false
          this.getLinkageList()
        })
          .catch(function(error) {
            console.log(error)
          })
      },
      // 删除窗口
      linkageDeleteDialog(index, row) {
        this.linkageDelete.ids.push(row.cid)
        this.$confirm('确认删除策略？', '提示', {
          cancelButtonClass: 'userCancel',
          confirmButtonClass: 'userConfirm',
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.deleteLinkage()
        }).catch(() => {
        })
      },
      // 编辑页面增加视频参数
      editAddTime() {
        if (this.editSafeTime.length < 9) {
          this.editSafeTime.push('')
        }
      },
      // 编辑页面减少视频参数
      editDeleteRow(index) {
        if (this.editSafeTime.length > 1) {
          this.editSafeTime.splice(index, 1)
        }
      },
      // 查看页面增加视频参数
      addAddTime() {
        if (this.LookSafeTime.length < 9) {
          this.LookSafeTime.push({ value: '' })
        }
      },
      // 查看页面减少视频参数
      addDeleteRow(index) {
        if (this.LookSafeTime.length > 1) {
          this.LookSafeTime.splice(index, 1)
        }
      },
      // 查询监听事件
      findLinkageId: function(linkageId) {
        this.linkageAll.data.condition.search = linkageId
        this.getLinkageList()
      },
      // 列表勾选复选框操作
      linkageChangeFun(val) {
        this.deleteid = []
        for (let d = 0; d < val.length; d++) {
          this.deleteid.push(val[d].cid)
        }
      },
      // 树的点击操作
      editLinkageNodeClick(data) {
        if (data.resource_id) {
          this.linkageTermsGet.id = ''
          this.linkageTermsGet.id = data.resource_id
          axios.post('/linkagemanage', this.linkageTermsGet, {
            headers: {
              'Content-Type': 'application/x-www-form-urlencoded'
            }
          }).then((res) => {
            this.linkageTermsData = []
            this.linkageTermsData = res.data.datas
          })
            .catch(function(error) {
              console.log(error)
            })
        }
      },
      // 单页显示个数事件
      linkageSizeChange(val) {
        var pageSize = val
        this.linkageAll.data.page.page_size = String(pageSize)
        this.getLinkageList()
      },
      // 页数事件
      linkageCurrentChange(val) {
        var pageNumber = val
        this.linkageAll.data.page.page_number = String(pageNumber)
        this.getLinkageList()
      },
      // 启用
      linkageEnable(index, row) {
        this.dialogEnable = true
        this.linkageEnableBody.ids.push(row.cid)
      },
      enableWork() {
        axios.post('/linkagemanage', this.linkageEnableBody, {
          headers: {
            'Content-Type': 'application/x-www-form-urlencoded'
          }
        }).then((res) => {
          this.dialogEnable = false
          this.$message({
            type: 'success',
            message: '启用成功'
          })
          this.linkageEnableBody.ids = []
          this.getLinkageList()
        })
          .catch(function(error) {
            console.log(error)
          })
      },
      // 禁用
      linkageDisable(index, row) {
        this.dialogDisable = true
        this.linkageDisableBody.ids.push(row.cid)
      },
      disableWork() {
        axios.post('/linkagemanage', this.linkageDisableBody, {
          headers: {
            'Content-Type': 'application/x-www-form-urlencoded'
          }
        }).then((res) => {
          this.dialogDisable = false
          this.$message({
            type: 'success',
            message: '禁用成功'
          })
          this.linkageDisableBody.ids = []
          this.getLinkageList()
        })
          .catch(function(error) {
            console.log(error)
          })
      }
    }
  }
</script>
<style rel="stylesheet/scss" lang="scss">
  .usafe-containner{
    width: 100%;
    .safeSearch{
      width: 100%;
      height: 50px;
    }
    .safeTableList{
      width: 100%;
      background-color: white;
    }
    .footerPage{
      float: right;
      right:20px;
      position: relative;
      margin: 5px 0px;
    }
    .tableIcon {
      padding: 0px;
      font-size: 20px;
      font-weight: 500;
      color: #0072F3;
      margin-left: 0px!important;
    }
    /deep/ .formBackground {
      background: #F0F2F7;
    }
    .addrsWeight {
      font-weight: bold;
      margin-left: 10px;
    }
    .segmentingLine {
      font-size: 20px;
    }
    .addrWidth {
      width: 700px;
    }
    /deep/ .gutter {
      background: rgb(216, 222, 232);
    }
    /deep/ .delete {
      display: inline;
      margin-left: 5px;
    }
    /deep/ .el-icon-delete{
      padding: 0;
      font-weight: 700;
      font-size: 20px;
      color: #d97159;
    }
    /deep/ .el-icon-minus {
      color: #D05133;
    }
    /deep/ .el-icon-delete:hover{
      color: #d97159;
    }
    /deep/ .el-icon-delete:focus{
      color: #d97159;
    }
    /deep/ .el-dialog {
      border-radius: 5px;
    }
    /deep/ .el-dialog__header {
      background: #E3E6EE;
      font-size: 18px;
      font-weight: bold;
      padding: 12px 20px 9px 20px;
      border-top-left-radius: 5px;
      border-top-right-radius: 5px;
      line-height: 20px;
    }
    /deep/ .el-dialog__headerbtn {
      top: 15px;
    }
    /deep/ .el-dialog__body {
      padding: 20px;
    }
    /deep/ .el-textarea__inner {
      resize: none;
    }
    /deep/ .el-table::before {
      height: 0px;
    }
    /deep/ .relation {
      padding: 0px;
      font-size: 20px;
      font-weight: 500;
      color: #0072F3;
    }
    /deep/ .lookInput > .el-input__inner {
      height: 30px;
      border: none;
    }
    /deep/ .lookAnatherInput > .el-input__inner {
      height: 30px;
      border: none;
    }
    /deep/ .editInput > .el-input__inner {
      height: 30px;
    }
    /deep/ .editRow {
      height: 500px;
      border: 1px solid #E4E5E7;
    }
    /deep/ .el-textarea__inner {
      border: none;
    }
    /deep/ .el-form-item {
      margin-bottom: 10px;
    }
    /deep/ img {
      vertical-align: middle;
      margin-bottom: 3px;
    }
    /deep/ [class*=" el-icon-"], [class^=el-icon-] {
      font-weight: 700;
    }
    /deep/ .el-tree {
      background: #EAEDF1;
      padding: 10px;
    }
    /deep/ .dialogSafeEdit > .el-dialog > .el-dialog__body {
      padding: 0px;
    }
    /deep/ .dialogSafeEdit > .el-dialog > .el-dialog__footer {
      height: 50px;
    }
    /deep/ .el-tree--highlight-current .el-tree-node.is-current > .el-tree-node__content {
      background-color: transparent;
      color: #0072F3;
    }
    /deep/ .el-dialog {
      width: 800px;
    }
    /deep/ .editForm {
      padding: 10px 20px;
      margin: 0px;
    }
    /deep/ .editRowLeft {
      background: #EAEDF1;
      border: 1px solid #E4E5E7;
      height: 499px;
    }
    /deep/ .notes {
      float: left;
      height: 30px;
      line-height: 30px;
      font-size: 14px;
      color: #69727E;
    }
    /deep/ #editAsterisk {
      color: #E53D41;
    }
    /deep/ .clears{
      padding: 6px 16px;
      background-color: #526D89;
      border-color: #526D89 ;
      color: #fff;
      float: right;
      margin-left: 10px;
    }
    /deep/ .bottonConfirm {
      padding: 6px 16px;
      float: right;
      border:1px solid #0072F3;
      background: #0072F3;
    }
    /deep/ .el-input__inner {
      height: 30px;
    }
    /deep/ .leftInput > .el-input__inner {
      height: 30px;
      margin:10px 20px;
      width: 220px;
    }
    .editSearch{
      position: absolute;
      margin-top: 18px;
      margin-left: -45px;
      cursor: pointer;
      color: #0072F3;
    }
    /deep/ .addEditIcon {
      color: #0072F3;
      font-size: 16px;
      cursor: pointer;
    }
    /deep/ .linkagesTable {
      background: #F0F2F7;
    }
    /deep/ .linkagesTable > .el-table__body-wrapper > .el-table__body > tbody > .el-table__row{
      background: #F0F2F7;
    }
    /deep/ .linkagesTable > .el-table__header-wrapper{
      height: 0px;
    }
    /deep/ .addSafeTable > .el-table__body-wrapper > .el-table__body > tbody > .el-table__row >  .el-table th{
      padding: 5px 0px;
    }
    /deep/ .el-table td {
      padding: 6px 0px;
    }
    /deep/ .el-table--scrollable-y .el-table__body-wrapper {
      overflow-y: auto;
    }
    /deep/ .forceTime {
      float: none;
      width: 100%;
    }
    /deep/ .linkageRowRight {
      padding: 10px;
    }
    /deep/ .linkageLabel {
      height: 30px;
      font-weight: normal;
    }
    /deep/ .linkageLabel > .el-form-item__label {
      font-weight: normal;
    }
    /deep/ .linkageSelect {
      width: 100%;
    }
    /deep/ .interval {
      float: left;
      width: 90%;
    }
    /deep/ .numberOfSeconds {
      margin-left: 20px;
    }
    /deep/ .linkageForm {
      padding: 10px;
      max-height: 475px;
      overflow-y: auto;
    }
    /deep/ .videoInput {
      width: 300px;
    }
    /deep/ .formsBackground {
      background: #F0F2F7;
      padding-bottom: 1px;
    }
    /deep/ .inputBackground > .el-input__inner {
      background: #F0F2F7;
    }
    /deep/ .lookAnatherInput {
      width: 600px;
    }
    #addNameSpan {
      float: left;
      margin: 20px 0px 0px 14px;
      color: #E53D41;
    }
    /deep/ .theLinkageTree {
      overflow: auto;
      height: 447px;
    }
    /deep/ .el-tag {
      background-color: transparent;
      border: none;
    }
    /deep/ .el-tag--success {
      background-color: transparent;
      color: #E53D41;
    }
    /deep/ .videoSpan {
      float: left;
      margin-top: 5px;
      color: #E53D41;
    }
    /deep/ .videoBlock {
      margin-left: -5px;
    }
    /deep/ .enableColor  > .el-input__inner {
      color: #0072F3;
    }
    /deep/ .disabledColor  > .el-input__inner {
      color: #E53D41;
    }
    .el-message-box{
      width: 540px;
    }
    .el-message-box__header{
      background-color: #E3E6EE;
      padding: 10px 15px;
    }
    .el-message-box__title{
      font-size: 18px;
      font-weight: Bold;
      color: #323842;
    }
    .el-message-box__status{
      right: 247px;
      top: 65px;
      font-size: 48px !important;
    }
    .el-message-box__status.el-icon-warning{
      color: #E53D41;
    }
    .el-message-box__content{
      height: 182px;
    }
    .el-message-box__status + .el-message-box__message {
      padding-left: 20px;
      padding-right: 12px;
    }
    .el-message-box__message p {
      margin: 0;
      font-size: 18px;
      color: #323842;
      padding-top: 96px;
      text-align: center;
    }
    .el-message-box__headerbtn{
      top: 9px;
      font-size: 18px;
    }
    .el-message-box__btns{
      padding: 10px 15px 7px ;
      border-top: 1px solid #e8eaf1;
    }
    .el-icon-delete{
      padding: 0;
      font-size: 20px;
      color: #d97159;
    }
    .el-icon-delete:hover{
      color: #d97159;
    }
    .el-icon-delete:focus{
      color: #d97159;
    }
    /deep/ .safeDisableDialog > .el-dialog > .el-dialog__body {
      text-align: center;
      font-size: 18px;
      height: 180px;
      border-bottom: 1px solid #e8eaf1;
    }
    /deep/ .safeDisableDialog > .el-dialog > .el-dialog__footer {
      height: 60px;
    }
    /deep/ .safeDisableDialog > .el-dialog > .el-dialog__footer > .dialog-footer > button {
      height: 30px;
      font-size: 14px;
      padding: 6px 16px;
    }
  }
</style>
